<template>
  <view class="dashboard-container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="logo">后台管理系统</view>
      <view class="user-info">
        <text class="welcome">欢迎，管理员</text>
        <button class="logout-btn" @click="logout">退出登录</button>
      </view>
    </view>
    
    <!-- 主体内容区 -->
    <view class="main-content">
      <!-- 左侧导航栏 -->
      <view class="sidebar">
        <view class="menu-item" :class="{ active: currentTab === 'user' }" @click="changeTab('user')">
          <text class="menu-text">用户管理</text>
        </view>
        <view class="menu-item" :class="{ active: currentTab === 'exam' }" @click="changeTab('exam')">
          <text class="menu-text">月考管理</text>
        </view>
        <view class="menu-item" :class="{ active: currentTab === 'settings' }" @click="changeTab('settings')">
          <text class="menu-text">系统设置</text>
        </view>
      </view>
      
      <!-- 右侧内容区 -->
      <view class="content-area">
        <view v-if="currentTab === 'user'">
          <view class="content-header">
            <text class="content-title">用户管理</text>
            <button class="add-btn" @click="addUser">新增用户</button>
          </view>
          <view class="content-body">
            <user-list ref="userListRef"></user-list>
          </view>
        </view>
        
        <view v-if="currentTab === 'exam'">
          <view class="content-header">
            <text class="content-title">月考管理</text>
            <button class="add-btn" @click="uploadExam">上传月考</button>
          </view>
          <view class="content-body">
            <exam-list ref="examListRef"></exam-list>
          </view>
        </view>
        
        <view v-if="currentTab === 'settings'">
          <view class="content-header">
            <text class="content-title">系统设置</text>
          </view>
          <view class="content-body">
            <settings></settings>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	import UserList from '@/pages/dashboard/user/userList.vue'
	import AddUser from '@/pages/dashboard/user/addUser.vue'
	import Setttings from '@/pages/dashboard/settings/settings.vue'
	import ExamList from '@/pages/dashboard/exam/examList.vue'
	// import AddUser from 
export default {
	components:{
		'user-list': UserList,
		'add-user':AddUser,
		'settings':Setttings,
		'exam-list':ExamList
	},
  data() {
    return {
      currentTab: 'user'
    }
  },
  onShow() {
  	console.log("onShow!显示组件")
  },
  onLoad() {
  	console.log("onLoad调用！")
  },
  methods: {
    changeTab(tabName) {
      this.currentTab = tabName;
    },
    logout() {
      uni.removeStorageSync('token');
      uni.navigateTo({
        url: '/pages/index/login'
      });
    },
    addUser() {
      uni.navigateTo({
        url: '/pages/dashboard/user/addUser'
      });
    },
    uploadExam() {
      uni.navigateTo({
        url: '/pages/dashboard/exam/uploadExam'
      });
    }
  }
}
</script>

<style>
.dashboard-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  background-color: #409eff;
  color: white;
  padding: 0 20px;
}

.logo {
  font-size: 20px;
  font-weight: bold;
}

.user-info {
  display: flex;
  align-items: center;
}

.welcome {
  margin-right: 20px;
}

.logout-btn {
  background-color: transparent;
  color: white;
  border: none;
  cursor: pointer;
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.sidebar {
  width: 200px;
  background-color: #f0f2f5;
  border-right: 1px solid #e4e7ed;
  padding-top: 20px;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.menu-item.active {
  background-color: #e4e7ed;
  color: #409eff;
}

.menu-text {
  font-size: 16px;
}

.content-area {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.content-title {
  font-size: 20px;
  font-weight: bold;
}

.add-btn {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}
</style>